<template>
  <a-drawer
    v-model:open="modalOpen"
    :title="moduleTitle"
    width="60%"
    placement="right"
  >
    <template #extra>
      <a-space wrap>
        <a-button
          type="primary"
          @click="handelOpen('新增特权', { id: levelId }, 'add')"
          >新建</a-button
        >
        <a-button type="primary" danger @click="modalOpen = false"
          >关闭</a-button
        >
      </a-space>
    </template>
    <a-card>
      <a-table
        :dataSource="dataSource"
        :columns="gradeColumns"
        :pagination="false"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'coverPic'">
            <a-image :src="record.coverPic" width="100px"></a-image>
          </template>
          <template v-if="column.key === 'state'">
            {{ record.state === 1 ? "启用" : "禁用" }}
          </template>
          <template v-if="column.key === 'type'">
            {{ typeArr[record.type - 1] }}
          </template>
          <template v-if="column.key === 'operate'">
            <a-space>
              <a-button
                type="primary"
                @click="handelOpen('编辑特权', record, 'update')"
                >编辑</a-button
              >
              <a-popconfirm
                title="您是否要删除此条数据?"
                ok-text="是"
                cancel-text="否"
                @confirm="handleDel(record.id)"
              >
                <a-button danger type="primary">删除</a-button>
              </a-popconfirm>
            </a-space>
          </template>
        </template>
      </a-table>
    </a-card>
  </a-drawer>
  <privilegeAdd ref="privilegeRef" @refreshList="refreshList" />
</template>
<script setup>
import { ref } from "vue";
import { gradeColumns } from "../columns.js";
import privilegeAdd from "./privilegeAdd.vue";
import { listGrowthRights, deleteGrowthRights } from "@/api/group";
import { message } from "ant-design-vue";
const modalOpen = ref(false);
const moduleTitle = ref("等级特权管理");
const typeArr = ["优惠卷", "积分抵扣", "生日献礼", "延迟退货"];
const dataSource = ref([]);
const levelId = ref("");
const open = (id) => {
  levelId.value = id;
  getListGrowthConfig(id);
  modalOpen.value = true;
};
const getListGrowthConfig = (id) => {
  listGrowthRights({ id }).then((res) => {
    if (res.code === 200) {
      dataSource.value = res.data;
    }
  });
};
const refreshList = () => {
  getListGrowthConfig(levelId.value);
};
const privilegeRef = ref(null);
const handelOpen = (titles, record, type) => {
  privilegeRef.value.open(titles, record, type);
};
function handleDel(id) {
  deleteGrowthRights({id:id}).then((res) => {
    if (res.code == 200) {
      message.success("删除成功");
      refreshList()
    }
  });
}
defineExpose({ modalOpen, open });
</script>
